
import { Popup, ScrollView, TextBox } from 'devextreme-react';
import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { intl } from "@/utils";
import { getCpasAllTids, getCpasByCategory, getJudgmentSheetName, saveCpasDescList } from '../service';
import { useModel } from 'umi';
import notify from 'devextreme/ui/notify';
import './index.less';
import Form, { Item } from 'devextreme-react/form';
import AntTabs from '~/public/cpas-ui/components-ui/ant-components/AntTab';
import { DevPopup } from '~/public/cpas-ui';


const SettingFormPupopHB = React.forwardRef((props: any, ref: any) => {
    const { initialState } = useModel('@@initialState');
    const { dbname } = initialState?.curPart as API.CurPart;
    const [visible, setVisible] = useState<boolean>(false);
    const cpasTableObj = useRef<any>({}); // tid
    const cpasTableOrigin = useRef<any>(''); // 来源

    const refsForm_HBGS = useRef<any>(null);
    const refsForm_HB = useRef<any>(null);
    const refsForm_GS = useRef<any>(null);
    const tipsEntryRef = useRef<any>(null);



    const [formAllData_HBGS, setFormAllData_HBGS] = useState<any>({
        formAllData: { fullName: "", isColumnNum: false, setTableCount: 1, isSetTwoTable: false },
        headerTitleName: "",
        headerTitleRightName: "",
        headerTitleLeftName: "",
        sign_GS0: '',
        sign_GS1: '',
        sign_GS2: ''
    });


    const [formAllData_HB, setFormAllData_HB] = useState<any>({
        formAllData: { fullName: "", isColumnNum: false },
        headerTitleName: "",
        headerTitleRightName: "",
        headerTitleLeftName: "",
        sign_GS0: '',
        sign_GS1: '',
        sign_GS2: ''
    });

    const [formAllData_GS, setFormAllData_GS] = useState<any>({
        formAllData: { fullName: "", isColumnNum: false },
        headerTitleName: "",
        headerTitleRightName: "",
        headerTitleLeftName: "",
        sign_GS0: '',
        sign_GS1: '',
        sign_GS2: ''
    });


    const [activeKey, setActiveKey] = useState<any>("1");


    const cpasFun = useRef<any>(null); // tid
    const validationRules = {
        fullName: [
            { type: 'required', message: '必填项不可删除' }
        ],
    }

    /*
    _HB  合并
    _GS  公司
    _HBGS 合并公司
    */

    const changeData_fun = (paramsType: string, objKey: string, objValue: any) => {
        if (paramsType === '_HBGS') {
            setFormAllData_HBGS((oldData: any) => {
                const newData = { ...oldData };
                newData[objKey] = objValue;
                return newData;
            });
        } else if (paramsType === '_HB') {
            setFormAllData_HB((oldData: any) => {
                const newData = { ...oldData };
                newData[objKey] = objValue;
                return newData;
            });
        } else if (paramsType === '_GS') {
            setFormAllData_GS((oldData: any) => {
                const newData = { ...oldData };
                newData[objKey] = objValue;
                return newData;
            });
        }

    }

    const getCpasSettingData = async (tempTid: string, paramsType: string) => {

        if (!paramsType) return;
        const resHeader = await getCpasByCategory({
            dbname,
            tid: [tempTid],
            category: "fsHeader" + paramsType,
        });
        const resSign = await getCpasByCategory({
            dbname,
            tid: [tempTid],
            category: "signRow" + paramsType,
        });
        const resAlias = await getCpasByCategory({
            dbname,
            tid: [tempTid],
            category: "aliasName" + paramsType,
        });
        let tempHeader: any = {};
        let tempSign: any = [];
        let tempalias: any = {};

        tempHeader = JSON.parse(resHeader?.data[0]?.describe ?? '{}');
        tempalias = JSON.parse(resAlias?.data[0]?.describe ?? '{}');
        changeData_fun(paramsType, 'headerTitleRightName', tempHeader?.headerTitleRightText ?? '');
        changeData_fun(paramsType, 'headerTitleLeftName', tempHeader?.headerTitleLeftText ?? '');
        if (paramsType === '_HBGS') {
            changeData_fun(paramsType, 'formAllData', {
                fullName: tempalias?.sheetName ?? '', isColumnNum: tempalias?.isColumnNum ?? false, isSetTwoTable: tempalias?.setTableCount === 2
            });
        } else {
            changeData_fun(paramsType, 'formAllData', {
                fullName: tempalias?.sheetName ?? '', isColumnNum: tempalias?.isColumnNum ?? false
            });
        }
        changeData_fun(paramsType, 'headerTitleName', tempalias?.headerTitleText ?? cpasTableObj.current.capsTitleName);

        tempSign = JSON.parse(resSign.data[0]?.describe ?? '{}');
        changeData_fun(paramsType, 'sign_GS0', tempSign[0]?.signName ?? '');
        changeData_fun(paramsType, 'sign_GS1', tempSign[1]?.signName ?? '');
        changeData_fun(paramsType, 'sign_GS2', tempSign[2]?.signName ?? '');
    }

    // 自定义方法
    useImperativeHandle(ref, () => ({
        showPupop: async (curCpasObj: any, pupopFun: any) => {
            cpasFun.current = pupopFun;
            cpasTableObj.current = curCpasObj;
            setActiveKey('1');
            cpasTableOrigin.current = `${curCpasObj.capsOrigin}-`;
            await getCpasSettingData(curCpasObj.capsTid, '_HBGS');
            await getCpasSettingData(curCpasObj.capsTid, '_HB');
            await getCpasSettingData(curCpasObj.capsTid, '_GS');
            setVisible(true);
        },
    }));


    const HBTabsClick = (r: any) => {
        setActiveKey(r);
    }

    const onCancel = (isOK: boolean = false) => {
        setVisible(false);
        cpasTableObj.current = {};
        cpasFun.current?.cancelCallback();
        if (isOK) {
            cpasFun.current?.okCallback();
        }
    }

    const getallTidsList = async () => {
        const res = await getCpasAllTids({
            dbname,
            originTableName: cpasTableOrigin.current,
            isAllTid: true
        });
        if (res.success) {
            const resMap = res.data.map((item: any) => item?.tid).filter((item: any) => item);
            return {
                resTid: resMap,
                resData: res.data
            };
        } else {
            notify("获取AllTids列表失败!", "error", 2000);
        }
        return {
            resTid: [],
            resData: []
        };
    }


    const onOk = async (isSaveAll: boolean) => {
        let tempSignRow = 'signRow_HBGS';
        let tempFsHeader = 'fsHeader_HBGS';
        let tempAliasName = 'aliasName_HBGS';

        let tempSignRowA = 'signRow_HB';
        let tempFsHeaderA = 'fsHeader_HB';
        let tempAliasNameA = 'aliasName_HB';
        let tempSignRowB = 'signRow_GS';
        let tempFsHeaderB = 'fsHeader_GS';
        let tempAliasNameB = 'aliasName_GS';


        if (refsForm_HBGS.current) {
            const devForm: Form = refsForm_HBGS.current as Form;
            const result: any = devForm.instance.validate();
            console.log(!result.isValid, '@@@ 返回具体的结果');
            if (!result.isValid) return notify("一张表内的Sheet页签是必填项", "error", 2000);
        };


        if (refsForm_HB.current) {
            const devForm: Form = refsForm_HB.current as Form;
            const result: any = devForm.instance.validate();
            console.log(!result.isValid, '@@@ 返回具体的结果');
            if (!result.isValid) return notify("两张表内的合并-Sheet页签是必填项", "error", 2000);
        };
        if (refsForm_GS.current) {
            const devForm: Form = refsForm_GS.current as Form;
            const result: any = devForm.instance.validate();
            console.log(!result.isValid, '@@@ 返回具体的结果');
            if (!result.isValid) return notify("两张表内的公司-Sheet页签是必填项", "error", 2000);
        };


        if (formAllData_HB.formAllData.fullName === formAllData_GS.formAllData.fullName) {
            return notify("两张表内的公司和合并-Sheet页签禁止相同", "error", 2000);
        };


        const res1 = await getJudgmentSheetName({
            likeName: '审定财务-',
            judgmentSheetName: formAllData_HBGS.formAllData.fullName,
            dbname,
            tid: cpasTableObj.current.capsTid,
            categoryType: 'aliasName_HBGS'
        });
        const res2 = await getJudgmentSheetName({
            likeName: '审定财务-',
            judgmentSheetName: formAllData_GS.formAllData.fullName,
            dbname,
            tid: cpasTableObj.current.capsTid,
            categoryType: 'aliasName_GS'
        });
        const res3 = await getJudgmentSheetName({
            likeName: '审定财务-',
            judgmentSheetName: formAllData_HB.formAllData.fullName,
            dbname,
            tid: cpasTableObj.current.capsTid,
            categoryType: 'aliasName_HB'
        });


        if (res1.data !== 'success') {
            return notify("一张表内的Sheet页签禁止和其他Sheet页签重名", "error", 2000);
        }
        if (res2.data !== 'success') {
            return notify("两张表内的公司-Sheet页签禁止和其他Sheet页签重名", "error", 2000);
        }

        if (res3.data !== 'success') {
            return notify("两张表内的合并-Sheet页签禁止和其他Sheet页签重名", "error", 2000);
        }

        let signRowData: any = [];
        let fsHeaderData: any = [];
        let aliasNameData: any = [];
        let signRowDataA: any = [];
        let fsHeaderDataA: any = [];
        let aliasNameDataA: any = [];
        let signRowDataB: any = [];
        let fsHeaderDataB: any = [];
        let aliasNameDataB: any = [];
        let tempSetTableCount = formAllData_HBGS.formAllData.isSetTwoTable ? 2 : 1;


        let tempFormAllData_HBGS = [{
            signID: 1,
            signName: formAllData_HBGS.sign_GS0,
        },
        {
            signID: 2,
            signName: formAllData_HBGS.sign_GS1,
        }, {
            signID: 3,
            signName: formAllData_HBGS.sign_GS2,
        }];
        let tempFormAllData_HB = [{
            signID: 1,
            signName: formAllData_HB.sign_GS0,
        },
        {
            signID: 2,
            signName: formAllData_HB.sign_GS1,
        }, {
            signID: 3,
            signName: formAllData_HB.sign_GS2,
        }];
        let tempFormAllData_GS = [{
            signID: 1,
            signName: formAllData_GS.sign_GS0,
        },
        {
            signID: 2,
            signName: formAllData_GS.sign_GS1,
        }, {
            signID: 3,
            signName: formAllData_GS.sign_GS2,
        }];

        if (isSaveAll) {
            const allTidData = await getallTidsList();
            if (allTidData.resTid.length) {

                signRowData = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempSignRow,
                        describe: JSON.stringify(tempFormAllData_HBGS)
                    }
                });
                fsHeaderData = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempFsHeader,
                        describe: JSON.stringify({ headerTitleRightText: formAllData_HBGS.headerTitleRightName, headerTitleLeftText: formAllData_HBGS.headerTitleLeftName })
                    }
                });
                aliasNameData = [{
                    tid: cpasTableObj.current.capsTid,
                    category: tempAliasName,
                    describe: JSON.stringify({
                        sheetName: formAllData_HBGS.formAllData.fullName, headerTitleText: formAllData_HBGS.headerTitleName,
                        isColumnNum: formAllData_HBGS.formAllData.isColumnNum,
                        setTableCount: tempSetTableCount
                    })
                }];

                signRowDataA = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempSignRowA,
                        describe: JSON.stringify(tempFormAllData_HB)
                    }
                });
                fsHeaderDataA = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempFsHeaderA,
                        describe: JSON.stringify({ headerTitleRightText: formAllData_HB.headerTitleRightName, headerTitleLeftText: formAllData_HB.headerTitleLeftName })
                    }
                });
                aliasNameDataA = [{
                    tid: cpasTableObj.current.capsTid,
                    category: tempAliasNameA,
                    describe: JSON.stringify({
                        sheetName: formAllData_HB.formAllData.fullName, headerTitleText: formAllData_HB.headerTitleName,
                        isColumnNum: formAllData_HB.formAllData.isColumnNum
                    })
                }];


                signRowDataB = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempSignRowB,
                        describe: JSON.stringify(tempFormAllData_GS)
                    }
                });
                fsHeaderDataB = allTidData.resTid.map((item: any) => {
                    return {
                        tid: item,
                        category: tempFsHeaderB,
                        describe: JSON.stringify({ headerTitleRightText: formAllData_GS.headerTitleRightName, headerTitleLeftText: formAllData_GS.headerTitleLeftName })
                    }
                });
                aliasNameDataB = [{
                    tid: cpasTableObj.current.capsTid,
                    category: tempAliasNameB,
                    describe: JSON.stringify({
                        sheetName: formAllData_GS.formAllData.fullName, headerTitleText: formAllData_GS.headerTitleName,
                        isColumnNum: formAllData_GS.formAllData.isColumnNum
                    })
                }];


            } else {
                notify(`获取全部的Tid失败！`, "error", 2000);
                // setVisiblePopup(false);
                return;
            }
        } else {
            signRowData = [{
                tid: cpasTableObj.current.capsTid,
                category: tempSignRow,
                describe: JSON.stringify(tempFormAllData_HBGS)
            }];

            fsHeaderData = [{
                tid: cpasTableObj.current.capsTid,
                category: tempFsHeader,
                describe: JSON.stringify({ headerTitleRightText: formAllData_HBGS.headerTitleRightName, headerTitleLeftText: formAllData_HBGS.headerTitleLeftName })
            }];
            aliasNameData = [{
                tid: cpasTableObj.current.capsTid,
                category: tempAliasName,
                describe: JSON.stringify({
                    sheetName: formAllData_HBGS.formAllData.fullName, headerTitleText: formAllData_HBGS.headerTitleName,
                    isColumnNum: formAllData_HBGS.formAllData.isColumnNum,
                    setTableCount: tempSetTableCount
                })
            }];
            signRowDataA = [{
                tid: cpasTableObj.current.capsTid,
                category: tempSignRowA,
                describe: JSON.stringify(tempFormAllData_HB)
            }];

            fsHeaderDataA = [{
                tid: cpasTableObj.current.capsTid,
                category: tempFsHeaderA,
                describe: JSON.stringify({ headerTitleRightText: formAllData_HB.headerTitleRightName, headerTitleLeftText: formAllData_HB.headerTitleLeftName })
            }];
            aliasNameDataA = [{
                tid: cpasTableObj.current.capsTid,
                category: tempAliasNameA,
                describe: JSON.stringify({ sheetName: formAllData_HB.formAllData.fullName, headerTitleText: formAllData_HB.headerTitleName, isColumnNum: formAllData_HB.formAllData.isColumnNum })
            }];
            signRowDataB = [{
                tid: cpasTableObj.current.capsTid,
                category: tempSignRowB,
                describe: JSON.stringify(tempFormAllData_GS)
            }];

            fsHeaderDataB = [{
                tid: cpasTableObj.current.capsTid,
                category: tempFsHeaderB,
                describe: JSON.stringify({ headerTitleRightText: formAllData_GS.headerTitleRightName, headerTitleLeftText: formAllData_GS.headerTitleLeftName })
            }];
            aliasNameDataB = [{
                tid: cpasTableObj.current.capsTid,
                category: tempAliasNameB,
                describe: JSON.stringify({ sheetName: formAllData_GS.formAllData.fullName, headerTitleText: formAllData_GS.headerTitleName, isColumnNum: formAllData_GS.formAllData.isColumnNum })
            }];

        };
        let signRowCpasDesc = {
            dbname,
            cpasDesc: signRowData
        };
        let fsHeaderCpasDesc = {
            dbname,
            cpasDesc: fsHeaderData
        };
        let aliasNameCpasDesc = {
            dbname,
            cpasDesc: aliasNameData
        };
        let signRowCpasDescA = {
            dbname,
            cpasDesc: signRowDataA
        };
        let fsHeaderCpasDescA = {
            dbname,
            cpasDesc: fsHeaderDataA
        };
        let aliasNameCpasDescA = {
            dbname,
            cpasDesc: aliasNameDataA
        };
        let signRowCpasDescB = {
            dbname,
            cpasDesc: signRowDataB
        };
        let fsHeaderCpasDescB = {
            dbname,
            cpasDesc: fsHeaderDataB
        };
        let aliasNameCpasDescB = {
            dbname,
            cpasDesc: aliasNameDataB
        };

        if (isSaveAll) {
            tipsEntryRef.current.show({
                title: "提示",
                okCallback: async () => {
                    await saveCpasDescList(aliasNameCpasDesc);
                    await saveCpasDescList(fsHeaderCpasDesc);
                    await saveCpasDescList(signRowCpasDesc);
                    await saveCpasDescList(aliasNameCpasDescB);
                    await saveCpasDescList(fsHeaderCpasDescB);
                    await saveCpasDescList(signRowCpasDescB);
                    await saveCpasDescList(aliasNameCpasDescA);
                    await saveCpasDescList(fsHeaderCpasDescA);
                    const res = await saveCpasDescList(signRowCpasDescA);
                    if (res.success) {
                        notify(`导出设置修改成功！`, "success", 2000);
                        onCancel(true);
                    } else {
                        notify(`导出设置修改失败！`, "error", 2000);
                    }

                }
            })
        } else {
            await saveCpasDescList(aliasNameCpasDesc);
            await saveCpasDescList(fsHeaderCpasDesc);
            await saveCpasDescList(signRowCpasDesc);
            await saveCpasDescList(aliasNameCpasDescB);
            await saveCpasDescList(fsHeaderCpasDescB);
            await saveCpasDescList(signRowCpasDescB);
            await saveCpasDescList(aliasNameCpasDescA);
            await saveCpasDescList(fsHeaderCpasDescA);
            const res = await saveCpasDescList(signRowCpasDescA);
            if (res.success) {
                notify(`导出设置修改成功！`, "success", 2000);
                onCancel(true);
            } else {
                notify(`导出设置修改失败！`, "error", 2000);
            }

        }

    }
    return (
        <>
            <Popup
                visible={visible}
                title={`合并_导出设计（${cpasTableObj.current.capsTabName}）`}
                width={1000}
                height={activeKey === '1' ? '450px' : '80vh'}

                onHiding={() => {
                    onCancel()
                }}
                toolbarItems={[
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: intl('pub.ok', '确定'),
                            type: 'default',
                            onClick: () => onOk(false)
                        },
                    },

                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: '应用全部',
                            type: 'default',
                            onClick: () => onOk(true),
                        },
                    },

                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: intl('pub.cancel', '取消'),
                            onClick: () => onCancel()
                        },
                    },


                ]}
            >
                <AntTabs
                    // activeKey={TbsStates.itemKey}
                    // tabPosition={"right"}
                    className="changeTabsHeightBox settingTabsBoxHB"
                    tabBarStyle={{ background: '#FFF' }}
                    onChange={HBTabsClick}
                    defaultActiveKey="1"
                    destroyInactiveTabPane={true}
                    // ref={tabsRef}
                    activeKey={activeKey}
                >
                    <AntTabs.TabPane
                        tab={'一张表'}
                        key={'1'}
                    >
                        <ScrollView width='100%' height='100%'>
                            {useMemo(() => {
                                const { headerTitleName, headerTitleLeftName, headerTitleRightName, sign_GS0, sign_GS1, sign_GS2, formAllData } = formAllData_HBGS;
                                return <div className='settingFormHB' style={{ margin: '8px 0' }}>
                                    <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                        <div className='settingTitle'>标题行设计</div>
                                        <div className='settingbiaoti settingNoneBorder'>

                                            <TextBox value={headerTitleName}
                                                defaultValue=""
                                                width={300}
                                                height={32}
                                                placeholder='点击编辑内容'
                                                valueChangeEvent="keyup"
                                                onValueChanged={(e: any) => {
                                                    const { value } = e;
                                                    changeData_fun('_HBGS', 'headerTitleName', value);

                                                }}
                                            />

                                            <div style={{ fontSize: '12px', color: "#929292", textAlign: 'center' }}>{cpasTableObj.current.capsTitleDate}</div>
                                        </div>
                                        <div className='settingTanx settingNoneBorder'>
                                            <div className='settingTanxCenter settingTextLeft'>
                                                <TextBox value={headerTitleLeftName}
                                                    defaultValue=""
                                                    width={230}
                                                    height={32}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HBGS', 'headerTitleLeftName', value);
                                                    }}
                                                />
                                            </div>
                                            <div className='settingTextRight'>
                                                <TextBox value={headerTitleRightName}
                                                    defaultValue=""
                                                    width={230}
                                                    height={32}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HBGS', 'headerTitleRightName', value);
                                                    }}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                        <div className='settingTitle'>签字行设计</div>
                                        <div className='settingTanx settingNoneBorder' style={{ flexWrap: 'wrap' }}>
                                            <TextBox width={230} height={32}
                                                className='settingTanxCenter settingTextLeft'
                                                defaultValue=""
                                                value={sign_GS0}
                                                placeholder='点击编辑内容'
                                                valueChangeEvent="keyup"
                                                onValueChanged={(e: any) => {
                                                    const { value } = e;
                                                    changeData_fun('_HBGS', 'sign_GS0', value);

                                                }}
                                            />
                                            <TextBox width={230} height={32}
                                                className='settingTanxCenter settingTextLeft'
                                                defaultValue=""
                                                value={sign_GS1}
                                                placeholder='点击编辑内容'
                                                valueChangeEvent="keyup"
                                                onValueChanged={(e: any) => {
                                                    const { value } = e;
                                                    changeData_fun('_HBGS', 'sign_GS1', value);
                                                }}
                                            />
                                            <TextBox width={230} height={32}
                                                className='settingTanxCenter settingTextLeft'
                                                defaultValue=""
                                                value={sign_GS2}
                                                placeholder='点击编辑内容'
                                                valueChangeEvent="keyup"
                                                onValueChanged={(e: any) => {
                                                    const { value } = e;
                                                    changeData_fun('_HBGS', 'sign_GS2', value);
                                                }}
                                            />
                                        </div>
                                    </div>
                                    <div>
                                        <div className='settingTitle'>其他设计</div>
                                        <Form
                                            ref={refsForm_HBGS}
                                            formData={formAllData}
                                            colCount={3}
                                            // labelMode={"hidden"}
                                            // focusStateEnabled={true}
                                            showColonAfterLabel={true}
                                            alignItemLabels={true}
                                        >
                                            <Item dataField="fullName"
                                                cssClass='fullNameText'
                                                // 
                                                label={{ text: 'Sheet名称' }}
                                                validationRules={validationRules.fullName}
                                                editorOptions={{
                                                    maxLength: 100,
                                                    placeholder: '点击编辑内容'
                                                }} />

                                            <Item
                                                dataField="isColumnNum"
                                                editorType="dxCheckBox"
                                                label={{ text: '是否配置栏次' }}
                                            />
                                            <Item
                                                dataField="isSetTwoTable"
                                                editorType="dxCheckBox"
                                                label={{ text: '是否调两张表设置' }}
                                            />
                                        </Form>
                                    </div>
                                </div>
                            }, [formAllData_HBGS])}
                        </ScrollView>
                    </AntTabs.TabPane>
                    <AntTabs.TabPane
                        tab={'两张表'}
                        key={'2'}
                    >
                        <ScrollView width='100%' height='100%'>
                            <div style={{ margin: '8px 0' }}>
                                {useMemo(() => {
                                    const { headerTitleName, headerTitleLeftName, headerTitleRightName, sign_GS0, sign_GS1, sign_GS2, formAllData } = formAllData_HB;
                                    return <div className='settingFormHB'>
                                        <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                            <div className='settingBoxTitle'>
                                                合并
                                            </div>
                                            <div className='settingTitle'>
                                                标题行设计
                                            </div>

                                            <div className='settingbiaoti settingNoneBorder'>
                                                <TextBox value={headerTitleName}
                                                    defaultValue=""
                                                    width={300}
                                                    height={32}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HB', 'headerTitleName', value);

                                                    }}
                                                />
                                                <div style={{ fontSize: '12px', color: "#929292", textAlign: 'center' }}>{cpasTableObj.current.capsTitleDate}</div>
                                            </div>
                                            <div className='settingTanx settingNoneBorder'>
                                                <div className='settingTanxCenter settingTextLeft'>
                                                    <TextBox value={headerTitleLeftName}
                                                        defaultValue=""
                                                        width={230}
                                                        height={32}
                                                        placeholder='点击编辑内容'
                                                        valueChangeEvent="keyup"
                                                        onValueChanged={(e: any) => {
                                                            const { value } = e;
                                                            changeData_fun('_HB', 'headerTitleLeftName', value);
                                                        }}
                                                    />
                                                </div>
                                                <div className='settingTextRight'>
                                                    <TextBox value={headerTitleRightName}
                                                        defaultValue=""
                                                        width={230}
                                                        height={32}
                                                        placeholder='点击编辑内容'
                                                        valueChangeEvent="keyup"
                                                        onValueChanged={(e: any) => {
                                                            const { value } = e;
                                                            changeData_fun('_HB', 'headerTitleRightName', value);
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                            <div className='settingTitle'>签字行设计</div>
                                            {/* <div className='settingTanx settingNoneBorder' style={{ flexWrap: 'wrap' }}>
                                            {
                                                popupDevData.map((item_HB: any, index: number) => {
                                                    return <div className='settingTanxCenter settingTextLeft' key={`HB_${index}`}>
                                                        <TextBox width={230} height={32}
                                                            defaultValue=""
                                                            value={item_HB.signName}
                                                            placeholder='点击编辑内容'
                                                            valueChangeEvent="keyup"
                                                            onValueChanged={(e: any) => {
                                                                const { value } = e;
                                                                console.log(value, '@@@ 616');
                                                                changeData_HB(value, index);
                                                            }}
                                                        />
                                                    </div>
                                                })

                                            }
                                        </div> */}
                                            <div className='settingTanx settingNoneBorder' style={{ flexWrap: 'wrap' }}>
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS0}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HB', 'sign_GS0', value);

                                                    }}
                                                />
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS1}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HB', 'sign_GS1', value);
                                                    }}
                                                />
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS2}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_HB', 'sign_GS2', value);
                                                    }}
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <div className='settingTitle'>其他设计</div>
                                            <Form
                                                ref={refsForm_HB}
                                                formData={formAllData}
                                                colCount={2}
                                                // labelMode={"hidden"}
                                                // focusStateEnabled={true}
                                                showColonAfterLabel={true}
                                                alignItemLabels={true}
                                            >
                                                <Item dataField="fullName"
                                                    cssClass='fullNameText'
                                                    // 
                                                    label={{ text: 'Sheet名称' }}
                                                    validationRules={validationRules.fullName}
                                                    editorOptions={{
                                                        maxLength: 100,
                                                        placeholder: '点击编辑内容'
                                                    }} />

                                                <Item
                                                    dataField="isColumnNum"
                                                    editorType="dxCheckBox"
                                                    label={{ text: '是否配置栏次' }}
                                                />
                                            </Form>
                                        </div>
                                    </div>
                                }, [formAllData_HB])}
                                {useMemo(() => {
                                    const { headerTitleName, headerTitleLeftName, headerTitleRightName, sign_GS0, sign_GS1, sign_GS2, formAllData } = formAllData_GS;
                                    return <div className='settingFormHB'>
                                        <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                            <div className='settingBoxTitle'>
                                                公司
                                            </div>
                                            <div className='settingTitle'>
                                                标题行设计
                                            </div>

                                            <div className='settingbiaoti settingNoneBorder'>
                                                <TextBox value={headerTitleName}
                                                    defaultValue=""
                                                    width={300}
                                                    height={32}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_GS', 'headerTitleName', value);

                                                    }}
                                                />
                                                <div style={{ fontSize: '12px', color: "#929292", textAlign: 'center' }}>{cpasTableObj.current.capsTitleDate}</div>
                                            </div>
                                            <div className='settingTanx settingNoneBorder'>
                                                <div className='settingTanxCenter settingTextLeft'>
                                                    <TextBox value={headerTitleLeftName}
                                                        defaultValue=""
                                                        width={230}
                                                        height={32}
                                                        placeholder='点击编辑内容'
                                                        valueChangeEvent="keyup"
                                                        onValueChanged={(e: any) => {
                                                            const { value } = e;
                                                            changeData_fun('_GS', 'headerTitleLeftName', value);
                                                        }}
                                                    />
                                                </div>
                                                <div className='settingTextRight'>
                                                    <TextBox value={headerTitleRightName}
                                                        defaultValue=""
                                                        width={230}
                                                        height={32}
                                                        placeholder='点击编辑内容'
                                                        valueChangeEvent="keyup"
                                                        onValueChanged={(e: any) => {
                                                            const { value } = e;
                                                            changeData_fun('_GS', 'headerTitleRightName', value);
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{ paddingBottom: '8px', borderBottom: "1px solid #ddd" }}>
                                            <div className='settingTitle'>签字行设计</div>
                                            <div className='settingTanx settingNoneBorder' style={{ flexWrap: 'wrap' }}>
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS0}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_GS', 'sign_GS0', value);

                                                    }}
                                                />
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS1}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_GS', 'sign_GS1', value);
                                                    }}
                                                />
                                                <TextBox width={230} height={32}
                                                    className='settingTanxCenter settingTextLeft'
                                                    defaultValue=""
                                                    value={sign_GS2}
                                                    placeholder='点击编辑内容'
                                                    valueChangeEvent="keyup"
                                                    onValueChanged={(e: any) => {
                                                        const { value } = e;
                                                        changeData_fun('_GS', 'sign_GS2', value);
                                                    }}
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <div className='settingTitle'>其他设计</div>
                                            <Form
                                                ref={refsForm_GS}
                                                formData={formAllData}
                                                colCount={2}
                                                // labelMode={"hidden"}
                                                // focusStateEnabled={true}
                                                showColonAfterLabel={true}
                                                alignItemLabels={true}
                                            >
                                                <Item dataField="fullName"
                                                    cssClass='fullNameText'
                                                    // 
                                                    label={{ text: 'Sheet名称' }}
                                                    validationRules={validationRules.fullName}
                                                    editorOptions={{
                                                        maxLength: 100,
                                                        placeholder: '点击编辑内容'
                                                    }} />

                                                <Item
                                                    dataField="isColumnNum"
                                                    editorType="dxCheckBox"
                                                    label={{ text: '是否配置栏次' }}
                                                />
                                            </Form>
                                        </div>
                                    </div>
                                }, [formAllData_GS])}
                            </div>
                        </ScrollView>
                    </AntTabs.TabPane>
                </AntTabs>

            </Popup>

            <DevPopup.Default ref={tipsEntryRef} width={180} height={200} >
                {() => {
                    return <span>该操作不保存标题头、栏次、是否调两张表设置和Sheet页签名称，确定要执行此操作吗？</span>
                }}
            </DevPopup.Default>
        </>
    );
});

export default SettingFormPupopHB;
